<template>
    <div class="essence-main">
        <div v-if="bookshelfUpdate.length">
            <div class="header">
                <span class="line hot-line"></span><span class="plate-title">书架更新</span>
                <nuxt-link to="/bookshelf"><button class="see-plate">查看更多</button></nuxt-link>
            </div>
            <div class="content">
                <div class="left" v-for="(item,index) in bookshelfUpdate" :key="index" v-if="index<3">
                    <nuxt-link :to="'/novelDetail/'+item.novelId" :title="item.name">
                        <img class="novel-icon" :src="item.coverimg" :alt="item.name">
                        <p class="novel-name ellipsis">{{item.name}}</p>
                        <p class="novel-author ellipsis">剩余{{item.SurplusChapter}}章未读</p>
                    </nuxt-link>
                </div>
                <div class="left" v-if="bookshelfUpdate.length==2"></div>
               
            </div>
        </div>
        <div>
            <div class="header">
                <span class="line collection-line"></span><span class="plate-title">热搜推荐</span>
                <nuxt-link :to="{path:'/bookstore/manDetail',query:{gender:'boy',type:'hot',title:'快眼热搜榜'}}" class="see-plate">查看更多</nuxt-link>
            </div>
            <div class="content">
                <div class="left" v-for="(item,index) in choice.hot" :key="index" v-if="index<3">
                   <nuxt-link :to="'/novelDetail/'+item.novelId" :title="item.name">
                        <img class="novel-icon" :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null" >
                        <p class="novel-name ellipsis">{{item.name}}</p>
                        <p class="novel-author ellipsis">{{item.author}}</p>
                    </nuxt-link>
                </div>
                
            </div>
        </div>
        <div>
            <div class="header">
                <span class="line retain-line"></span><span class="plate-title">男生爱看</span>
            </div>
            <div class="like-content">
                <div class="tab-wrapper">
                    <span class="tab-item" v-for="(item,index) in boysType" :key="index">
                        <button @click="boyFavorite(index)">{{item}}</button>
                        <span class="line" v-if="boysTypeFlag==index"></span>
                    </span>
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <nuxt-link :to="'/novelDetail/'+item.novelId" v-for="(item,index) in boyFavoriteList" :key="index">
                                <div class="left"><img :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null"></div>
                                <div class="right">
                                    <p class="ellipsis title">{{item.name}}</p>
                                    <p class="ellipsis">{{item.author}} | {{item.category}}</p>
                                    <p class="ellipsis">{{item.intro}}</p>
                                    <p class="ellipsis">{{item.marknum}}人在追 | {{item.retention}}读者留存</p>
                                </div>
                            </nuxt-link>
                        </li>
                    </ul>
                </div>
                <div class="center">
                   <nuxt-link :to="{path:'/bookstore/classifyDetail',query:boyQuery}">
                        <button class="enter-btn">进入男生分类榜</button>
                   </nuxt-link> 
                </div>
            </div>
        </div>
        <div>
            <div class="header">
                <span class="line end-line"></span><span class="plate-title">女生爱看</span>
            </div>
            <div class="like-content">
                <div class="tab-wrapper girl-tab">
                    <span class="tab-item" v-for="(item,index) in girlsType" :key="index">
                        <button @click="girlFavorite(index)">{{item}}</button>
                        <span class="line" v-if="girlsTypeFlag==index"></span>
                    </span>
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <router-link :to="'/novelDetail/'+item.novelId" v-for="(item,index) in girlFavoriteList" :key="index">
                                <div class="left"><img :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null"></div>
                                <div class="right">
                                    <p class="ellipsis title">{{item.name}}</p>
                                    <p class="ellipsis">{{item.author}} | {{item.category}}</p>
                                    <p class="ellipsis">{{item.intro}}</p>
                                    <p class="ellipsis">{{item.marknum}}人在追 | {{item.retention}}读者留存</p>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
                <div class="center">
                    <nuxt-link :to="{path:'/bookstore/classifyDetail',query:girlQuery}">
                        <button class="enter-btn girls-enter-btn">进入女生分类榜</button>
                    </nuxt-link>
                </div>
            </div>
        </div>

        <div>
            <div class="header">
                <span class="line other-line"></span><span class="plate-title">最新更新</span>
            </div>
            <div class="like-content">
                <div class="list">
                    <ul>
                        <li>
                            <router-link :to="'/novelDetail/'+item.novelId" v-for="(item,index) in choice.recentUpdate" :key="index">
                                <div class="left"><img :src="item.cover" :alt="item.name" onerror="this.src='https://static.kuaiyankanshu.net/';this.onerror=null"></div>
                                <div class="right">
                                    <p class="ellipsis title">{{item.name}} <span class="update-time">16:53更新</span></p>
                                    <p class="ellipsis">{{item.author}}</p>
                                    <p class="ellipsis">{{item.gender}}生 | {{item.category}}</p>
                                    <p class="ellipsis">{{item.last_chapter}}</p>
                                </div>
                            </router-link>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="footer">
            本站系基于互联网搜索引擎技术为您提供信息检索服务。
        </div>
    </div>
</template>

<script>
   import {Toast} from 'mint-ui'
   import api from '~/plugins/api.js'
   import axios from 'axios'
   import storage from 'localforage'
   export default {
    props:{
        choice: {
            type: Object,
            default: function () {
                return {}
            }
        },
    },
    // watch:{
    //     choice: {
    //         handler: 'init',
    //         deep: true
    //     }
    // },
    data () {
      return {
         boysType: [],
         boysTypeFlag: 0,
         boyFavoriteList: [],
         girlsType: [],
         girlsTypeFlag: 0,
         girlFavoriteList:[],
         bookshelfUpdate: [],
         boyQuery: {},
         girlQuery: {}
      }
    },
    created() {
        // console.log('essence----',process.server,this.choice)
        this. init()
    },
    mounted() {
        this.getUnLogin()
    },
    methods: {
        jumpDetail() {
            this.$router.push('/novelDetail')
        },
        async init() {
            if(!this.choice.boyFavorite) return
            this.boysType = this.choice.boyFavorite.map(function(item,index,arr){
                return item.name
            })
            this.boyFavorite(0)
            
            this.girlsType = this.choice.girlFavorite.map(function(item,index,arr){
                return item.name
            })
            this.girlFavorite(0)
            
        },
        boyFavorite(index) {
            this.boysTypeFlag=index
            if(this.choice.boyFavorite.length){
                let obj = this.choice.boyFavorite[index]
                this.boyFavoriteList = obj.list
                this.boyQuery = {
                    key:obj.cateKey,
                    name: obj.name
                }
            }
        },
        girlFavorite(index) {
            this.girlsTypeFlag=index
            if(this.choice.girlFavorite.length){
                let obj = this.choice.girlFavorite[index]
                this.girlFavoriteList = obj.list
                this.girlQuery = {
                    key:obj.cateKey,
                    name: obj.name
                }
            }
        },
        /**
         * 获取书架更新
         */
        async getUnLogin() {
            let arr = await storage.getItem('bookshelfIdKey') || []
            let ids = ''
            if(arr.length){
                ids = arr.join()
            }
            let result = await axios.get(api.unLogin,{params:{novelId:ids}})
            if(result){
                this.bookshelfUpdate = await this.lastUpdateAction(result.data.data)
            }
        },
        async lastUpdateAction(arr) {
            let obj = await storage.getItem('timestampKey') || {}
            let newArr = arr.map(function(item,index){
                let itemObj = obj[item.novelId]
                if(itemObj){
                    if(item.lastUpdate>itemObj.timestamp){
                        item['haveUpdate'] = true
                    }
                    item['currentQuery'] = itemObj.currentQuery
                    item['lastReadName'] = '上次读至 - '+itemObj.lastChapter
                    item['SurplusChapter'] = parseInt(item.chapterCount) - parseInt(itemObj.currentQuery.chapterId)
                }else{
                    item['currentQuery'] = {
                        novelId: item.novelId,
                        chapterId: '1',
                        siteId: item.siteId
                    }
                    item['SurplusChapter'] = parseInt(item.chapterCount)
                }
                return item
            })
            return newArr
        }
    }
  }
</script>
